<template>
  <div style="text-align: center;margin: 0 auto;" >
    <div>
      <el-divider content-position="center"><h2>当前功能</h2></el-divider>
    </div>
    <div style="text-align: center ;" >
      <el-carousel autoplay type="card" :height="bannerH+'px'"  trigger="click" arrow="never" style="width: 100%;margin:0 auto" interval="2000">
        <el-carousel-item class="image" v-for="item in images" :key="item.id">
          <img :src="item.url" width="100%" alt="无图片" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div style="margin-top: 30px">
      <el-divider content-position="center"><h2>开发进程</h2></el-divider>
    </div>
    <div>
      <el-steps :active="8" align-center>
        <el-step title="注册域名" description="2022-05-17"></el-step>
        <el-step title="开始开发" description="2022-06-15"></el-step>
        <el-step title="用户管理" description="2022-06-26"></el-step>
        <el-step title="登录注册" description="2022-06-28"></el-step>
        <el-step title="域名完成ICP备案" description="2022-06-28"></el-step>
        <el-step title="完成Web聊天室" description="2022-07-02"></el-step>
        <el-step title="完成关于界面" description="2022-07-03"></el-step>
        <el-step title="完成项目部署" description="2022-07-05"></el-step>
        <el-step title="注册页邮箱验证" description="coming soon"></el-step>
        <el-step title="保存聊天记录" description="coming soon"></el-step>
      </el-steps>
    </div>
    <div style="text-align: center;margin-top: 40px">
      <el-divider content-position="center"><h3>与我联系</h3></el-divider>
      <el-row :gutter="12">
        <el-col :span="8">
          <el-card shadow="hover">
            <a @click="repository" style="cursor: pointer;display: block;width: 100%;height: auto;">项目地址</a>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <a @click="mail" style="cursor: pointer;display: block;width: 100%;height: auto;">我的邮箱</a>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <a @click="drawer = true" style="cursor: pointer;display: block;width: 100%;height: auto;">捐助我</a>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-drawer
        :visible.sync="drawer"
        :direction="direction">
      <div style="text-align: center">
        <h1 style="font-size: 30px;">捐助我</h1>
      </div>
      <div >
        <img src="../assets/wx.png" style="width: 70%;">
        <img src="../assets/ali.jpg" style="width: 70%">
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "Carousel",
  data() {
    return {
      drawer: false,
      direction: 'rtl',
      bannerH :350,
      images: [
        { id:1, url: require("@/assets/l1.png"),},
        {id:2, url: require("@/assets/l2.png")},
        {id:3, url: require("@/assets/l3.png")},
        {id:4, url: require("@/assets/l4.png")}

      ],
    };
  },
  created() {
    //主动拦截
    this.request.get("/user/activeFilter")
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.setBannerH()
    }, false);
  },
  methods:{
    //设置走马灯高度
    setBannerH() {
      this.bannerH = document.body.clientWidth / 4
    },
    //跳转仓库
    repository() {
      window.open('https://gitee.com/Y-aY-a/java_class_end')
    },
    //邮箱
    mail() {
      window.open('http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=S3l6cnl9fnx5ensLOjplKCQm')
    },
  }
};
</script>

<style scoped>
.el-carousel{
  overflow-x:hidden;
  overflow-y: hidden;
}

.image{
  height: 550px;
}

</style>
